<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

</head>
<body>
<%--<div class="layui-tab">--%>
<%--    <ul class="layui-tab-title">--%>
<%--        <li class="layui-this">网站设置</li>--%>
<%--        <li>用户管理</li>--%>
<%--        <li>权限分配</li>--%>
<%--        <li>商品管理</li>--%>
<%--        <li>订单管理</li>--%>
<%--    </ul>--%>
<%--    <div class="layui-tab-content">--%>
<%--        <div class="layui-tab-item layui-show">--%>
<%--            1. 高度默认自适应，也可以随意固宽。--%>
<%--            <br>2. Tab进行了响应式处理，所以无需担心数量多少。--%>
<%--        </div>--%>
<%--        <div class="layui-tab-item">内容2</div>--%>
<%--        <div class="layui-tab-item">内容3</div>--%>
<%--        <div class="layui-tab-item">内容4</div>--%>
<%--        <div class="layui-tab-item">内容5</div>--%>
<%--    </div>--%>
<%--</div>--%>
<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">--%>
<%--    <legend>动态操作Tab</legend>--%>
<%--</fieldset>--%>

<%--<div class="layui-tab" lay-filter="demo" lay-allowclose="true">--%>
<%--    <ul class="layui-tab-title">--%>
<%--        <li class="layui-this" lay-id="11">网站设置</li>--%>
<%--        <li lay-id="22">用户管理</li>--%>
<%--        <li lay-id="33">权限分配</li>--%>
<%--        <li lay-id="44">商品管理</li>--%>
<%--        <li lay-id="55">订单管理</li>--%>
<%--    </ul>--%>
<%--    <div class="layui-tab-content">--%>
<%--        <div class="layui-tab-item layui-show">内容1</div>--%>
<%--        <div class="layui-tab-item">内容2</div>--%>
<%--        <div class="layui-tab-item">内容3</div>--%>
<%--        <div class="layui-tab-item">内容4</div>--%>
<%--        <div class="layui-tab-item">内容5</div>--%>
<%--    </div>--%>
<%--</div>--%>
<%--<div class="site-demo-button" style="margin-bottom: 0;">--%>
<%--    <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>--%>
<%--    <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>--%>
<%--    <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>--%>
<%--</div>--%>

<%--<!-- 示例-970 -->--%>
<%--<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862"--%>
<%--     data-ad-slot="3820120620"></ins>--%>

<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">--%>
<%--    <legend>Hash地址定位</legend>--%>
<%--</fieldset>--%>
<%--<div class="layui-tab" lay-filter="test">--%>
<%--    <ul class="layui-tab-title">--%>
<%--        <li class="layui-this" lay-id="11">网站设置</li>--%>
<%--        <li lay-id="22">用户管理</li>--%>
<%--        <li lay-id="33">权限分配</li>--%>
<%--        <li lay-id="44">商品管理</li>--%>
<%--        <li lay-id="55">订单管理</li>--%>
<%--    </ul>--%>
<%--    <div class="layui-tab-content">--%>
<%--        <div class="layui-tab-item layui-show">--%>
<%--            点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项--%>
<%--        </div>--%>
<%--        <div class="layui-tab-item">内容2</div>--%>
<%--        <div class="layui-tab-item">内容3</div>--%>
<%--        <div class="layui-tab-item">内容4</div>--%>
<%--        <div class="layui-tab-item">内容5</div>--%>
<%--    </div>--%>
<%--</div>--%>

<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">--%>
<%--    <legend>简洁风格的Tab</legend>--%>
<%--</fieldset>--%>

<%--<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">--%>
<%--    <ul class="layui-tab-title">--%>
<%--        <li class="layui-this">网站设置</li>--%>
<%--        <li>用户管理</li>--%>
<%--        <li>权限分配</li>--%>
<%--        <li>商品管理</li>--%>
<%--        <li>订单管理</li>--%>
<%--    </ul>--%>
<%--    <div class="layui-tab-content" style="height: 100px;">--%>
<%--        <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>--%>
<%--        <div class="layui-tab-item">内容2</div>--%>
<%--        <div class="layui-tab-item">内容3</div>--%>
<%--        <div class="layui-tab-item">内容4</div>--%>
<%--        <div class="layui-tab-item">内容5</div>--%>
<%--    </div>--%>
<%--</div>--%>

<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">--%>
<%--    <legend>卡片风格的Tab</legend>--%>
<%--</fieldset>--%>

<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li>账号登录</li>
        <li>扫码登录</li>
        <%--        <li>权限分配</li>--%>
        <%--        <li>商品管理</li>--%>
        <%--        <li>订单管理</li>--%>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item">1</div>
        <div class="layui-tab-item">2</div>
        <%--        <div class="layui-tab-item">3</div>--%>
        <%--        <div class="layui-tab-item">4</div>--%>
        <%--        <div class="layui-tab-item">5</div>--%>
        <%--        <div class="layui-tab-item">6</div>--%>
    </div>
</div>

<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">--%>
<%--    <legend>当Tab数超过一定宽度</legend>--%>
<%--</fieldset>--%>

<%--<div class="layui-tab layui-tab-card" style="width: 290px;">--%>
<%--    <ul class="layui-tab-title">--%>
<%--        <li class="layui-this">网站设置</li>--%>
<%--        <li>用户管理</li>--%>
<%--        <li>权限分配</li>--%>
<%--        <li>商品管理</li>--%>
<%--        <li>订单管理</li>--%>
<%--    </ul>--%>
<%--    <div class="layui-tab-content" style="height: 100px;">--%>
<%--        <div class="layui-tab-item layui-show">--%>
<%--            1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。--%>
<%--            <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。--%>
<%--        </div>--%>
<%--        <div class="layui-tab-item">2</div>--%>
<%--        <div class="layui-tab-item">3</div>--%>
<%--        <div class="layui-tab-item">4</div>--%>
<%--        <div class="layui-tab-item">5</div>--%>
<%--        <div class="layui-tab-item">6</div>--%>
<%--    </div>--%>
<%--</div>--%>

<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">--%>
<%--    <legend>带删除功能的Tab</legend>--%>
<%--</fieldset>--%>

<%--<div class="layui-tab layui-tab-card" lay-allowclose="true">--%>
<%--    <ul class="layui-tab-title">--%>
<%--        <li class="layui-this">网站设置</li>--%>
<%--        <li>用户基本管理</li>--%>
<%--        <li>权限分配</li>--%>
<%--        <li>商品管理</li>--%>
<%--        <li>订单管理</li>--%>
<%--    </ul>--%>
<%--    <div class="layui-tab-content" style="height: 150px;">--%>
<%--        <div class="layui-tab-item layui-show">--%>
<%--            1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例--%>
<%--            2. 删除功能适用于所有风格--%>
<%--        </div>--%>
<%--        <div class="layui-tab-item">2</div>--%>
<%--        <div class="layui-tab-item">3</div>--%>
<%--        <div class="layui-tab-item">4</div>--%>
<%--        <div class="layui-tab-item">5</div>--%>
<%--        <div class="layui-tab-item">6</div>--%>
<%--    </div>--%>
<%--</div>--%>

<script src="/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            // tabAdd: function () {
            //     //新增一个Tab项
            //     element.tabAdd('demo', {
            //         title: '新选项' + (Math.random() * 1000 | 0) //用于演示
            //         , content: '内容' + (Math.random() * 1000 | 0)
            //         , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
            //     })
            // },
            // tabDelete: function (othis) {
            //     //删除指定Tab项
            //     element.tabDelete('demo', '44'); //删除：“商品管理”
            //     othis.addClass('layui-btn-disabled');
            // },
            tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        // $('.site-demo-active').on('click', function () {
        //     var othis = $(this), type = othis.data('type');
        //     active[type] ? active[type].call(this, othis) : '';
        // });

        // //Hash地址的定位
        // var layid = location.hash.replace(/^#test=/, '');
        // element.tabChange('test', layid);
        //
        // element.on('tab(test)', function (elem) {
        //     location.hash = 'test=' + $(this).attr('lay-id');
        // });

    });
</script>

</body>
</html>